<template>
  <el-card class="salesSearch">
    <template #header>
      <el-menu
        :default-active="state.activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect">
        <el-menu-item index="1">销售额</el-menu-item>
        <el-menu-item index="2">访问量</el-menu-item>
      </el-menu>
      <div class="sales-right">
        <el-radio-group v-model="state.time" size="default">
          <el-radio-button label="今日" />
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
          <el-radio-button label="本年" />
        </el-radio-group>
        <el-date-picker
          v-model="state.time2"
          type="datetimerange"
          :shortcuts="shortcuts"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
    </template>
    <div class="sales-content">
       <!--柱状图和右侧列表-->
      <v-chart class="line-chart" :option="getBarOption()" autoresize>
      </v-chart>
      <div class="sales-content-list">
        <h4>门店{{state.activeIndex == '1'?'销售额':'访问量'}}排名</h4>
<!--        <ul>-->
<!--          <li><span class="list-no">1</span>肯德基<span>223.567</span></li>-->
<!--          <li><span class="list-no">2</span>麦当劳<span>223.567</span></li>-->
<!--          <li><span class="list-no">3</span>肯德基<span>223.567</span></li>-->
<!--          <li><span>4</span>海底捞<span>223.567</span></li>-->
<!--          <li><span>5</span>西贝莜面村<span>223.567</span></li>-->
<!--          <li><span>6</span>汉堡王<span>223.567</span></li>-->
<!--          <li><span>7</span>真功夫<span>223.567</span></li>-->
<!--        </ul>-->
        <ul>
          <li v-for="rank in rankData" :key="rank.no" ><span :class="rank.no<=3 ?'list-no':''">{{rank.no}}</span>{{ rank.name }}<span>{{ rank.count }}</span></li>
<!--       :class="{'list-no':rank.no<=3}}"-->
        </ul>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "index"
};
</script>
<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import {useReportStore} from '@/stores/reportData'
const reportDataStore = useReportStore()
const radio = ref('今日')
// 定义一个对象，存储tab栏切换的值，与时间值
const state =reactive({
  activeIndex:"1",
  time:'本周',
  time2:''
})
// 日期选择图表组件
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

// 其实相当于是有两组数据来不同的切换,柱状图
const getBarOption = ()=>{
  const text = state.activeIndex == '1' ? '销售趋势':'访问量趋势'
  return{
    title:{
      text,
      textStyle:{
        fontSize:16
      },
      left:10
    },
    xAxis: {
      type: 'category',
      data: state.activeIndex == '1'?orderFullYearAxis.value : userFullYearAxis.value,
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: state.activeIndex == '1'?orderFullYear.value:userFullYear.value,
        type: 'bar',
        barWidth:25,
      }
    ],
    tooltip:{
      trigger:'axis',
      confine:true,
      axisPointer:{
        type:'shadow'
      }
    },
    grid:{
      left:20,
      right:20,
      bottom:20,
      top:40,
      containLabel:true
    }
  }
}

// 使用计算属性精简数据,柱状图数据
const orderFullYearAxis = computed(()=>reportDataStore.reportData.orderFullYearAxis)
const orderFullYear = computed(()=>reportDataStore.reportData.orderFullYear)
const userFullYearAxis=computed(()=>reportDataStore.reportData.userFullYearAxis)
const userFullYear=computed(()=>reportDataStore.reportData.userFullYear)

// 右侧列表会用到的数据
const orderRank = computed(() => reportDataStore.reportData.orderRank)
const userRank = computed(() => reportDataStore.reportData.userRank)
const rankData = computed(()=> state.activeIndex=='1'?orderRank.value:userRank.value)
// tab切换
const handleSelect = (val:string)=>{
  console.log(val)
  state.activeIndex= val
}

</script>
<style lang="scss" scoped>
.salesSearch{
  margin-top:20px;
  //使用深度选择器来获取子组件的类名（深层次的类型）
  :deep(.el-card__header){
    position: relative;
    border-bottom:0;
    padding: 0 20px;
    .sales-right{
      position: absolute;
      right: 20px;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      .el-date-editor{
        margin-left:20px;
      }
    }
  }
  .sales-content{
    display: flex;
    .line-chart{
      flex: 5;
      height: 270px;
    }
    .sales-content-list{
     flex: 2;
      ul{
        list-style: none;
        font-size: 14px;
        padding-left: 0;
        li{
          height: 25px;
          span{
            cursor: pointer;
            &:first-child{
              display: inline-block;
              margin-right: 20px;
              line-height: 20px;
              text-align:center;
              width: 20px;
              height: 20px;
            }
            &:last-child{
              float: right;
              margin-right: 10px;
            }
            &.list-no{
              background-color: black;
              border-radius: 50%;
              color: #fff;

            }
          }
        }
      }
    }
  }

}

</style>